// NotFound.jsx
import React from 'react';
import { Link } from 'react-router-dom';
import styled from 'styled-components';
import { FaExclamationTriangle } from 'react-icons/fa';

const Container = styled.div`
    text-align: center;
    padding: 100px 20px;
    color: #444;
    background-color: #f8f8f8;
    min-height: 100vh;
`;

const Icon = styled(FaExclamationTriangle)`
    color: #ff6b6b;
    font-size: 64px;
    margin-bottom: 20px;
`;

const Title = styled.h1`
    font-size: 48px;
    margin-bottom: 20px;
`;

const Message = styled.p`
    font-size: 20px;
    margin-bottom: 40px;
`;

const HomeButton = styled(Link)`
    padding: 12px 24px;
    background-color: #0077ff;
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 18px;
    text-decoration: none;
    transition: background-color 0.3s;

    &:hover {
        background-color: #005dc1;
    }
`;

const NotFound = () => {
    return (
        <Container>
            <Icon />
            <Title>404 - 页面未找到</Title>
            <Message>你访问的页面不存在，可能已被移除或路径错误。</Message>
            <HomeButton to="/">返回首页</HomeButton>
        </Container>
    );
};

export default NotFound;
